<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('设备状态趋势统计')"/>
    <style type="text/css">
        .container-div {
            padding: 16px;
        }

        .select-table {
            margin-bottom: 0;
            padding: 0;
            background: none;
        }

        .echarts {
            height: 240px;
        }

        .fixed-table-toolbar {
            display: none;
        }
    </style>
</head>
<body class="body-dark">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12">
            <div class="nbox nbox_border1">
                <ul class="fillet">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="nbox-inner">
                    <div class="nbox-hd">
                        <div class="title">每日设备预警、告警量</div>
                        <div class="caption">
                            <form id="dateForm" style="font-size: 0">
                                <div class="form-group" style="margin: 0;display: inline-flex;">
                                    <div class="input-daterange input-group">
                                        <span class="input-group-addon">日期范围选择：</span>
                                        <input type="text" class="input-sm form-control" name="startTime"
                                               id="startTime" placeholder="yyyy-MM-dd"/>
                                        <span class="input-group-addon"
                                              style="border-left: none;border-right: none">到</span>
                                        <input type="text" class="input-sm form-control" name="enfTime" id="endTime"
                                               placeholder="yyyy-MM-dd"/>
                                    </div>
                                    <button type="button" class="btn btn-primary ms-1" onclick="search()">查询
                                    </button>
                                    <button type="button" class="btn btn-primary  ms-1" onclick="reset()">重置
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="nbox__bd">
                        <div class="echarts" id="echarts-line-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="nbox nbox_border1">
                <ul class="fillet">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="nbox-inner">
                    <div class="nbox__bd" style="padding: 8px">
                        <div class="select-table table-striped">
                            <div class="tabs-container">
                                <ul class="nav nav-tabs">

                                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"
                                                          onclick="goTab1()">
                                        告警提醒</a>
                                    </li>
                                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false"
                                                    onclick="goTab2()">预警提醒</a>
                                    </li>


                                </ul>
                                <div class="tab-content" style="margin-top: 8px">
                                    <div id="tab-1" class="tab-pane active">
                                        <table id="bootstrap-table"></table>
                                    </div>
                                    <div id="tab-2" class="tab-pane">
                                        <table id="bootstrap-table2"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="nbox nbox_border1">
                <ul class="fillet">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="nbox-inner">
                    <div class="nbox-hd">
                        <div class="title">机床告警占比</div>
                    </div>
                    <div class="nbox__bd">
                        <div class="echarts" id="echarts-machine-chart"></div>
                    </div>
                </div>
                <div class="nbox-inner">
                    <div class="nbox-hd">
                        <div class="title">机械臂告警占比</div>
                    </div>
                    <div class="nbox__bd">
                        <div class="echarts" id="echarts-arm-chart"></div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-sm-6">
            <div class="nbox nbox_border1">
                <ul class="fillet">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="nbox-inner">
                    <div class="nbox-hd">
                        <div class="title">机床预警占比</div>
                    </div>
                    <div class="nbox__bd">
                        <div class="echarts" id="echarts-machineError-chart"></div>
                    </div>
                </div>
                <div class="nbox-inner">
                    <div class="nbox-hd">
                        <div class="title">机械臂预警占比</div>
                    </div>
                    <div class="nbox__bd">
                        <div class="echarts" id="echarts-armError-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var alarmCountArray = [[${alarmCountArray}]];
    var rqArray = [[${rqArray}]];
    var warningCountArray = [[${warningCountArray}]];
    var valueData = [[${valueData}]];
    var alarmData = [[${alarmData}]];
    var loginTotal = [[${loginTotal}]];

    $(function () {
        machineProportion();
        armProportion();
        machineErrorProportion();
        armErrorProportion();
        initeEcharts(['设备预警量', '设备告警量'], warningCountArray, alarmCountArray, rqArray);  //typeArray, h5Array, pcArray, dateArray
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            var startDate = laydate.render({
                elem: '#startTime',
                max: $('#endTime').val(),
                theme: 'molv',
                trigger: 'click',
                done: function (value, date) {
                    // 结束时间大于开始时间
                    if (value !== '') {
                        endDate.config.min.year = date.year;
                        endDate.config.min.month = date.month - 1;
                        endDate.config.min.date = date.date;
                    } else {
                        endDate.config.min.year = '';
                        endDate.config.min.month = '';
                        endDate.config.min.date = '';
                    }
                }
            });
            var endDate = laydate.render({
                elem: '#endTime',
                min: $('#startTime').val(),
                theme: 'molv',
                trigger: 'click',
                done: function (value, date) {
                    // 开始时间小于结束时间
                    if (value !== '') {
                        startDate.config.max.year = date.year;
                        startDate.config.max.month = date.month - 1;
                        startDate.config.max.date = date.date;
                    } else {
                        startDate.config.max.year = '';
                        startDate.config.max.month = '';
                        startDate.config.max.date = '';
                    }
                }
            });
        });


        //
        var options1 = {
            url: ctx + "gy" + "/alarmRecord/list",
            modalName: "设备告警记录",
            //  pagination: false,
            columns: [
                {
                    field: 'alarmId',
                    title: '主键',
                    visible: false
                },
                {
                    field: 'deviceName',
                    title: '设备名称'
                },
                {
                    field: 'deviceno',
                    title: '设备编号'
                },
                {
                    field: 'deviceType',
                    title: '设备种类',
                },
                {
                    field: 'deviceStatus',
                    title: '设备状态',
                },
                {
                    field: 'locationName',
                    title: '所属学院',
                },
                {
                    field: 'createTime',
                    title: '告警时间'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs ' + '" href="javascript:void(0)" onclick="getAlarmDetail(\'' + row.alarmId + '\')">详情</a> ');
                        return actions.join('');
                    }
                }


            ]
        }
        $.table.init(options1);


    });


    function armProportion() {
        var dom = document.getElementById('echarts-arm-chart');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var dataArr = [[${armProportion}]];
        var option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },

            series: [{
                name: "机械臂告警占比",
                type: "gauge",
                // center: ['20%', '50%'],
                radius: '70%',
                splitNumber: 10,
                axisLine: {
                    lineStyle: {
                        color: [
                            [dataArr / 100, '#468EFD'],
                            [1, "#111F42"]
                        ],
                        width: 5
                    }
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,

                },
                splitLine: {
                    show: false,
                },
                itemStyle: {
                    show: false,
                },
                detail: {
                    formatter: '{value}%',
                    textStyle: {
                        padding: [0, 0, 0, 0],
                        fontSize: 18,
                        fontWeight: '700',
                        color: '#468EFD'
                    }
                },
                data: [{
                    name: "",
                    value: dataArr,
                }],
                pointer: {
                    show: true,
                    length: '75%',
                    radius: '20%',
                    width: 10, //指针粗细
                },
                animationDuration: 4000,
            },
                {
                    name: '外部刻度',
                    type: 'gauge',
                    //  center: ['20%', '50%'],
                    radius: '90%',
                    min: 0, //最小刻度
                    max: 100, //最大刻度
                    splitNumber: 10, //刻度数量
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: [
                                [1, 'rgba(0,0,0,0)']
                            ]
                        }
                    }, //仪表盘轴线
                    axisLabel: {
                        show: true,
                        color: '#4d5bd1',
                        distance: 25,
                        formatter: function (v) {
                            switch (v + '') {
                                case '0':
                                    return '0';
                                case '10':
                                    return '10';
                                case '20':
                                    return '20';
                                case '30':
                                    return '30';
                                case '40':
                                    return '40';
                                case '50':
                                    return '50';
                                case '60':
                                    return '60';
                                case '70':
                                    return '70';
                                case '80':
                                    return '80';
                                case '90':
                                    return '90';
                                case '100':
                                    return '100';
                            }
                        }
                    }, //刻度标签。
                    axisTick: {
                        show: true,
                        splitNumber: 7,
                        lineStyle: {
                            color: '#468EFD', //用颜色渐变函数不起作用
                            width: 1,
                        },
                        length: -8
                    }, //刻度样式
                    splitLine: {
                        show: true,
                        length: -20,
                        lineStyle: {
                            color: '#468EFD', //用颜色渐变函数不起作用
                        }
                    }, //分隔线样式
                    detail: {
                        show: false
                    },
                    pointer: {
                        show: false
                    }
                },
            ]
            // series: [
            //     {
            //         name: 'Pressure',
            //         type: 'gauge',
            //         detail: {
            //             formatter: '{value}%'
            //         },
            //         data: [
            //             {
            //                 value: [[${armProportion}]],
            //                 name: ''
            //             }
            //         ]
            //     }
            // ]
        };

        myChart.setOption(option);
        $(window).resize(myChart.resize);

    }

    function machineProportion() {
        var dom = document.getElementById('echarts-machine-chart');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var dataArr = [[${machineProportion}]];
        var option = {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [{
                name: '机床告警占比',
                type: 'gauge',
                // center: ['20%', '50%'],
                radius: '70%',
                splitNumber: 10,
                axisLine: {
                    lineStyle: {
                        color: [
                            [dataArr / 100, '#468EFD'],
                            [1, "#111F42"]
                        ],
                        width: 5
                    }
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,

                },
                splitLine: {
                    show: false,
                },
                itemStyle: {
                    show: false,
                },
                detail: {
                    formatter: '{value}%',
                    textStyle: {
                        padding: [0, 0, 0, 0],
                        fontSize: 18,
                        fontWeight: '700',
                        color: '#468EFD'
                    }
                },
                data: [{
                    name: "",
                    value: dataArr,
                }],
                pointer: {
                    show: true,
                    length: '75%',
                    radius: '20%',
                    width: 10, //指针粗细
                },
                animationDuration: 4000,
            },
                {
                    name: '外部刻度',
                    type: 'gauge',
                    //  center: ['20%', '50%'],
                    radius: '90%',
                    min: 0, //最小刻度
                    max: 100, //最大刻度
                    splitNumber: 10, //刻度数量
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: [
                                [1, 'rgba(0,0,0,0)']
                            ]
                        }
                    }, //仪表盘轴线
                    axisLabel: {
                        show: true,
                        color: '#4d5bd1',
                        distance: 25,
                        formatter: function (v) {
                            switch (v + '') {
                                case '0':
                                    return '0';
                                case '10':
                                    return '10';
                                case '20':
                                    return '20';
                                case '30':
                                    return '30';
                                case '40':
                                    return '40';
                                case '50':
                                    return '50';
                                case '60':
                                    return '60';
                                case '70':
                                    return '70';
                                case '80':
                                    return '80';
                                case '90':
                                    return '90';
                                case '100':
                                    return '100';
                            }
                        }
                    }, //刻度标签。
                    axisTick: {
                        show: true,
                        splitNumber: 7,
                        lineStyle: {
                            color: '#468EFD', //用颜色渐变函数不起作用
                            width: 1,
                        },
                        length: -8
                    }, //刻度样式
                    splitLine: {
                        show: true,
                        length: -20,
                        lineStyle: {
                            color: '#468EFD', //用颜色渐变函数不起作用
                        }
                    }, //分隔线样式
                    detail: {
                        show: false
                    },
                    pointer: {
                        show: false
                    }
                },
            ]
            // series: [
            //     {
            //         name: 'Pressure',
            //         type: 'gauge',
            //         detail: {
            //             formatter: '{value}%',
            //
            //         },
            //         data: [
            //             {
            //                 value: [[${machineProportion}]],
            //                 name: ''
            //             }
            //         ]
            //     }
            // ]
        };

        myChart.setOption(option);
        $(window).resize(myChart.resize);

    }

    function goTab2() {
        var options = {
            id: "bootstrap-table2",
            url: ctx + "gy" + "/deviceEarlyWarningRecord/list",
            modalName: "设备预警记录",
            // pagination: false,
            columns: [
                {
                    field: 'earlyWarnId',
                    title: '主键',
                    visible: false
                },

                {
                    field: 'deviceName',
                    title: '设备名称'
                },
                {
                    field: 'deviceno',
                    title: '设备编号'
                },
                {
                    field: 'deviceType',
                    title: '设备种类',
                },
                {
                    field: 'deviceType',
                    title: '预警原因',
                    formatter: function (value, row, index) {
                        return '运行时间超过系统设置的阀值';
                    }
                },
                {
                    field: 'deviceStatus',
                    title: '设备状态',
                },
                {
                    field: 'locationName',
                    title: '所属学院',
                },
                {
                    field: 'createTime',
                    title: '告警时间'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs ' + '" href="javascript:void(0)" onclick="getEarlyWarnDetail(\'' + row.earlyWarnId + '\')">详情</a> ');
                        return actions.join('');
                    }
                }
            ]

        };
        $.table.init(options);
    };

    function goTab1() {
        $.table.refresh("bootstrap-table");
    }

    function getEarlyWarnDetail(id) {
        $.modal.openTab("详细信息", ctx + "gy" + "/deviceEarlyWarningRecord/detail?earlyWarnId=" + id);
    }

    function getAlarmDetail(id) {
        $.modal.openTab("详细信息", ctx + "gy" + "/alarmRecord/detail?alarmId=" + id);
    }

    function initeEcharts(typeArray, warningCountArray, alarmCountArray, dateArray) {
        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
        var lineoption = {
            title: {
                // text: '每日登录、访问数量'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: typeArray,
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        color: '#999',
                    },
                    data: dateArray
                }
            ],
            yAxis: [

                {
                    type: 'value',
                    axisLabel: {
                        color: '#999',
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.12)',
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.12) ',
                        }
                    },
                }
            ],
            "color": ['#1e91ff', '#975fe4', '#f2637b', '#fad337', "#4dcb73", "#13c2c2"],
            series: [
                {
                    name: typeArray[0],
                    type: 'line',
                    data: warningCountArray,
                    color: '#D94216',
                    // markPoint: {
                    //     data: [
                    //         {type: 'max', name: '最大值'}
                    //     ]
                    // },
                    // markLine: {
                    //     data: [
                    //         {type: 'average', name: '平均值'}
                    //     ]
                    // }
                },
                {
                    name: typeArray[1],
                    type: 'line',
                    data: alarmCountArray,
                    color: '#1C84C6',
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        lineChart.setOption(lineoption);
        $(window).resize(lineChart.resize);
    }

    function search() {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        if (!startTime || !endTime) {
            $.modal.alert("请选择开始日期和结束日期");
            return;
        }
        $.modal.loading("加载中，请耐心等待！");
        $.ajax({
            type: "GET",
            url: ctx + "gy/deviceStatusAnaly/search",
            data: {
                startTime: $("#startTime").val(),
                endTime: $("#endTime").val()
            },
            dataType: "json",
            success: function (data) {
                console.log(data)
                initeEcharts(['设备预警量', '设备告警量'], data.warningCountArray, data.alarmCountArray, data.rqArray);  //typeArray, h5Array, pcArray, dateArray
                $.modal.closeLoading();
            },
            error: {}
        });
    }

    function reset() {
        $.form.reset("dateForm");
    }


    function machineErrorProportion() {
        var dom = document.getElementById('echarts-machineError-chart');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var dataArr = [[${machineError}]];
        var option = {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [{
                name: '机床预警占比',
                type: 'gauge',
                // center: ['20%', '50%'],
                radius: '70%',
                splitNumber: 10,
                axisLine: {
                    lineStyle: {
                        color: [
                            [dataArr / 100, '#468EFD'],
                            [1, "#111F42"]
                        ],
                        width: 5
                    }
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,

                },
                splitLine: {
                    show: false,
                },
                itemStyle: {
                    show: false,
                },
                detail: {
                    formatter: '{value}%',
                    textStyle: {
                        padding: [0, 0, 0, 0],
                        fontSize: 18,
                        fontWeight: '700',
                        color: '#468EFD'
                    }
                },
                data: [{
                    name: "",
                    value: dataArr,
                }],
                pointer: {
                    show: true,
                    length: '75%',
                    radius: '20%',
                    width: 10, //指针粗细
                },
                animationDuration: 4000,
            },
                {
                    name: '外部刻度',
                    type: 'gauge',
                    //  center: ['20%', '50%'],
                    radius: '90%',
                    min: 0, //最小刻度
                    max: 100, //最大刻度
                    splitNumber: 10, //刻度数量
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: [
                                [1, 'rgba(0,0,0,0)']
                            ]
                        }
                    }, //仪表盘轴线
                    axisLabel: {
                        show: true,
                        color: '#4d5bd1',
                        distance: 25,
                        formatter: function (v) {
                            switch (v + '') {
                                case '0':
                                    return '0';
                                case '10':
                                    return '10';
                                case '20':
                                    return '20';
                                case '30':
                                    return '30';
                                case '40':
                                    return '40';
                                case '50':
                                    return '50';
                                case '60':
                                    return '60';
                                case '70':
                                    return '70';
                                case '80':
                                    return '80';
                                case '90':
                                    return '90';
                                case '100':
                                    return '100';
                            }
                        }
                    }, //刻度标签。
                    axisTick: {
                        show: true,
                        splitNumber: 7,
                        lineStyle: {
                            color: '#468EFD', //用颜色渐变函数不起作用
                            width: 1,
                        },
                        length: -8
                    }, //刻度样式
                    splitLine: {
                        show: true,
                        length: -20,
                        lineStyle: {
                            color: '#468EFD', //用颜色渐变函数不起作用
                        }
                    }, //分隔线样式
                    detail: {
                        show: false
                    },
                    pointer: {
                        show: false
                    }
                },
            ]
            // series: [
            //     {
            //         name: 'Pressure',
            //         type: 'gauge',
            //         detail: {
            //             formatter: '{value}%',
            //
            //         },
            //         data: [
            //             {
            //                 value: [[${machineProportion}]],
            //                 name: ''
            //             }
            //         ]
            //     }
            // ]
        };

        myChart.setOption(option);
        $(window).resize(myChart.resize);

    }

    function armErrorProportion() {
        var dom = document.getElementById('echarts-armError-chart');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var dataArr = [[${armError}]];
        var option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },

            series: [{
                name: "机械臂预警占比",
                type: "gauge",
                // center: ['20%', '50%'],
                radius: '70%',
                splitNumber: 10,
                axisLine: {
                    lineStyle: {
                        color: [
                            [dataArr / 100, '#468EFD'],
                            [1, "#111F42"]
                        ],
                        width: 5
                    }
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,

                },
                splitLine: {
                    show: false,
                },
                itemStyle: {
                    show: false,
                },
                detail: {
                    formatter: '{value}%',
                    textStyle: {
                        padding: [0, 0, 0, 0],
                        fontSize: 18,
                        fontWeight: '700',
                        color: '#468EFD'
                    }
                },
                data: [{
                    name: "",
                    value: dataArr,
                }],
                pointer: {
                    show: true,
                    length: '75%',
                    radius: '20%',
                    width: 10, //指针粗细
                },
                animationDuration: 4000,
            },
                {
                    name: '外部刻度',
                    type: 'gauge',
                    //  center: ['20%', '50%'],
                    radius: '90%',
                    min: 0, //最小刻度
                    max: 100, //最大刻度
                    splitNumber: 10, //刻度数量
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: [
                                [1, 'rgba(0,0,0,0)']
                            ]
                        }
                    }, //仪表盘轴线
                    axisLabel: {
                        show: true,
                        color: '#4d5bd1',
                        distance: 25,
                        formatter: function (v) {
                            switch (v + '') {
                                case '0':
                                    return '0';
                                case '10':
                                    return '10';
                                case '20':
                                    return '20';
                                case '30':
                                    return '30';
                                case '40':
                                    return '40';
                                case '50':
                                    return '50';
                                case '60':
                                    return '60';
                                case '70':
                                    return '70';
                                case '80':
                                    return '80';
                                case '90':
                                    return '90';
                                case '100':
                                    return '100';
                            }
                        }
                    }, //刻度标签。
                    axisTick: {
                        show: true,
                        splitNumber: 7,
                        lineStyle: {
                            color: '#468EFD', //用颜色渐变函数不起作用
                            width: 1,
                        },
                        length: -8
                    }, //刻度样式
                    splitLine: {
                        show: true,
                        length: -20,
                        lineStyle: {
                            color: '#468EFD', //用颜色渐变函数不起作用
                        }
                    }, //分隔线样式
                    detail: {
                        show: false
                    },
                    pointer: {
                        show: false
                    }
                },
            ]
            // series: [
            //     {
            //         name: 'Pressure',
            //         type: 'gauge',
            //         detail: {
            //             formatter: '{value}%'
            //         },
            //         data: [
            //             {
            //                 value: [[${armProportion}]],
            //                 name: ''
            //             }
            //         ]
            //     }
            // ]
        };

        myChart.setOption(option);
        $(window).resize(myChart.resize);

    }
</script>
</body>
</html>
